<template>
    <div class="ViewDialog">
        <el-dialog
            title="题目预览"
            :visible="value"
            @close="close"
            width="800px">
            <div class="row">
                <div class="col">
                    <span>【题型】：</span>
                    <span>{{ questionType(data.questionType) }}</span>
                </div>
                <div class="col">
                    <span>【编号】：</span>
                    <span>{{ data.id }}</span>
                </div>
                <div class="col">
                    <span>【难度】：</span>
                    <span>{{ difficulty(data.difficulty) }}</span>
                </div>
                <div class="col">
                    <span>【标签】：</span>
                    <span>{{ tags(data.tags) }}</span>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <span>【学科】：</span>
                    <span>{{ data.subjectName }}</span>
                </div>
                <div class="col">
                    <span>【目录】：</span>
                    <span>{{ catalog(data.catalogID) }}</span>
                </div>
                <div class="col">
                    <span>【方向】：</span>
                    <span>{{ data.direction }}</span>
                </div>
                <div class="col"></div>
            </div>
            <el-divider></el-divider>
            <div class="row">
                <div class="col">
                    <span>【题干】：</span>
                    <span>{{ formatting(data.question) }}</span>
                </div>
            </div>
            <div class="row" v-if="data.questionType !== '3'">
                <div class="col">
                    <span>【选项】：</span>
                </div>
            </div>
            <div class="row" v-if="data.questionType !== '3'">
                <div class="col" v-if="data.questionType === '1'">
                    <div class="option">
                        <el-radio :value="rightOption" label="0">A：{{ data.options[0].title }}</el-radio>
                    </div>
                    <div class="option">
                        <el-radio :value="rightOption" label="1">B：{{ data.options[1].title }}</el-radio>
                    </div>
                    <div class="option">
                        <el-radio :value="rightOption" label="2">C：{{ data.options[2].title }}</el-radio>
                    </div>
                    <div class="option last-option">
                        <el-radio :value="rightOption" label="3">D：{{ data.options[3].title }}</el-radio>
                    </div>
                </div>
                <div class="col" v-if="data.questionType === '2'">
                    <el-checkbox-group :value="rightOptionList">
                        <div class="option">
                            <el-checkbox label="0">A：{{ data.options[0].title }}</el-checkbox>
                        </div>
                        <div class="option">
                            <el-checkbox label="1">B：{{ data.options[1].title }}</el-checkbox>
                        </div>
                        <div class="option">
                            <el-checkbox label="2">C：{{ data.options[2].title }}</el-checkbox>
                        </div>
                        <div class="option last-option">
                            <el-checkbox label="3">D：{{ data.options[3].title }}</el-checkbox>
                        </div>
                    </el-checkbox-group>
                </div>
            </div>
            <el-divider></el-divider>
            <div class="row">
                <div class="col">
                    <span>【参考答案】：</span>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <span>【答案解析】：</span>
                    <span v-if="hasVideo(data.videoURL)">无</span>
                    <el-button v-else
                               size="small"
                               type="success"
                               @click="showVideo = !showVideo">
                        答案解析视频
                    </el-button>
                </div>
            </div>
            <div class="row" v-if="!hasVideo(data.videoURL) && showVideo">
                <div class="col video-col">
                    <video src="http://v.itheima.com/xmsz.mp4" controls autoplay></video>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <span>【题目备注】：</span>
                    <span>{{ data.remarks }}</span>
                </div>
            </div>
            <el-divider></el-divider>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" type="primary" @click="close">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getQuestionItem } from '@/api/hmmm/questions'
import { getSimpleMenu } from '@/api/hmmm/directorys'

export default {
    name: 'ViewDialog',
    props: {
        value: Boolean,
        currentID: Number
    },
    created () {
        this.getSimpleMenu()
    },
    data () {
        return {
            data: {},
            showVideo: false,
            catalogIDList: [],
            rightOption: '',
            rightOptionList: [],
        }
    },
    methods: {
        async render (id) {
            const res = await getQuestionItem({
                id: id
            })
            let obj = res.data
            if (obj.options.length === 0) {
                obj.options = [
                    { code: 'A', isRight: false, title: '' },
                    { code: 'B', isRight: false, title: '' },
                    { code: 'C', isRight: false, title: '' },
                    { code: 'D', isRight: false, title: '' }
                ]
            }
            this.data = obj
            res.data.options.forEach((e, i) => {
                if (res.data.questionType === '1') e.isRight ? this.rightOption = i + '' : ''
                if (res.data.questionType === '2') e.isRight ? this.rightOptionList.push(i + '') : ''
            })
        },
        async getSimpleMenu () {
            const res = await getSimpleMenu()
            this.catalogIDList = res.data
        },
        questionType (type) {
            if (type === '1') return '单选'
            if (type === '2') return '多选'
            if (type === '3') return '简答'
        },
        formatting (content) {
            const reg = /<[^>]+>/g
            if (content) return content.replace(reg, '')
            return ''
        },
        difficulty (type) {
            if (type === '1') return '简单'
            if (type === '2') return '一般'
            if (type === '3') return '困难'
        },
        tags (str) {
            return str
        },
        catalog (val) {
            const obj = this.catalogIDList.find(e => e.value === val)
            if (obj) return obj.label
            return ''
        },
        hasVideo (url) {
            const str = url + ''
            const keywords = ['http', 'https', 'www']
            let flag = true
            keywords.forEach(e => {
                if (str.indexOf(e) === 0) flag = false
            })
            return flag
        },
        close () {
            this.data = {}
            this.catalogIDList = []
            this.rightOption = ''
            this.rightOptionList = []
            this.$emit('input', false)
        }
    },
    watch: {
        currentID(val) {
            this.render(val)
        }
    }
}
</script>

<style scoped lang="scss">
.ViewDialog {
    .row {
        display: flex;
        padding: 10px 16px;

        .col {
            flex: 1;

            .option {
                padding-left: 8px;
                margin-bottom: 10px;

                .el-radio {
                    margin: 0;
                }
            }

            .last-option {
                margin: 0;
            }
        }

        .video-col {
            height: 250px;
            padding-left: 6px;

            video {
                height: 100%;
                border-radius: 5px;
            }
        }
    }

    ::v-deep .el-dialog {
        margin-bottom: 10vh;

        .el-dialog__body {
            padding: 10px 0;
        }

        .el-dialog__footer {
            padding: 0 20px 20px;
            text-align: right !important;
        }

        .el-divider {
            margin: 10px 0;
        }
    }
}
</style>
<style>
.el-dialog__header {
    padding: 15px 20px 12px;
}
</style>
